<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctxPath}/static/manage/css/x-admin.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/static/manage/layui/css/layui.css" media="all">
    <script src="${ctxPath}/static/manage/layui/layui.js"></script>
    <script src="${ctxPath}/static/manage/js/x-layui.js" charset="utf-8"></script>
</head>
<body>
    <div class="x-nav">
                <span class="layui-breadcrumb">
                  <a><cite>后台管理</cite></a>
                  <a><cite>网站首页</cite></a>
                  <a><cite>首页列表</cite></a>
                </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
        <xblock>
            <blockquote class="layui-elem-quote quoteBox">
                <form class="layui-form">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input searchVal" placeholder="请输入搜索的内容" />
                        </div>
                        <a class="layui-btn search_btn" data-type="reload">搜索</a>
                    </div>
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-normal addNews_btn" href="javascript:home_add('添加用户','toHomeAdd','600','500');">添加内容</a>
                    </div>
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
                    </div>
                </form>
            </blockquote>
        </xblock>

        <table id="homeTable" lay-filter="homeTable"></table>

        <div id="page"></div>
    </div>

</body>
</html>

<script>
    layui.use(['jquery', 'element', 'table', 'layer'], function(){
        var $ = layui.$, table = layui.table, layer = layui.layer;
        element = layui.element();

        table.render({
            elem: '#homeTable'
            ,height: 312
            ,url: 'homeTable/' //数据接口
            ,page: false //开启分页
            ,limit: 10
            ,cols: [[ //表头
                { checkbox: true, fixed: true },
                { field: 'id', title: '排序', sort: true, fixed: true },
                { field: 'modularName', title: '模块', sort: true },
                { field: 'pictureUrl', title: '新闻图片', templet:'<div><img src="${ctxPath}/static/file/{{d.pictureUrl}}"></div>'},
                { field: 'uploadTime', title: '上传时间', sort: true, edit: true },
                { field: 'messageId', title: '对应文章' },
                { field: 'pictureId', title: '日期类型' },
                { field: 'state', title: '是否显示（state）', event: 'state', templet: function(d){
                       var html = ['<input type="checkbox" name="state" lay-skin="switch" lay-text="是|否"'];
                        html.push(d.state > 0 ? ' checked' : '');
                        html.push('/>');
                        return html.join('');
                    }
                },
                { field: 'tempId', title: '操作', templet: function(d){
                        return '<a class="layui-btn layui-btn-xs" lay-event="edit" lay-id="'+ d.tempId +'"><i class="layui-icon layui-icon-edit"></i>编辑</a>' +
                                '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="'+ d.tempId +'"><i class="layui-icon layui-icon-delete"></i>移除</a>';
                    }
                }
            ]]
        });

        // 监听工具条
        table.on('tool(homeTable)', function (obj) {
            // data前行数据， lay-event或event 对应的值，当前行tr的DOM对象
            var data = obj.data, event = obj.event, tr = obj.tr;
            console.log(data);
            switch(event){
                case "edit":
                    // 新窗口打开
                    x_admin_showUpdate(event,'toHomeUpdate', 1, '', 500);

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                    break;
                case "state":
                    // 向服务端发送修改
                    var stateVal = tr.find("input[name='state']").prop('checked') ? 1 : 0;
                    $.extend(obj.data, {'state': stateVal});
                    break;
                case "del":
                    layer.confirm('真的删除行么？', function(index){
                        // 向服务端发送删除指令
                        obj.del();
                        layer.close(index);
                    });
                    break;
            }
        });
    });

    // 添加
    function home_add(title,url,w,h){
        x_admin_showAdd(title,url,w,h);
    }

</script>
